<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<c:if test="${!empty infoServices}">
	<h1>Services</h1>

	<button class="btn btn-primary btn" data-toggle="modal"
		data-target="#newModal">New Service</button>
	<div class="modal fade" id="newModal">
		<div class="modal-dialog" style="width: 350px;">


			<form method="post" action="services/new">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">New Service</h4>
					</div>
					<div class="modal-body">
						<select id="service_type" class="form-control" name="typeService">
							<option value="0" selected="selected" disabled>Select
								service type</option>
							<option value="1">internet</option>
							<option value="2">phone</option>
							<option value="3">free</option>
						</select>


						<script>
							function myFunction(obj) {
								var id = $(obj).parent().parent().find(
										".id_fild").prop('value');
								var name = $(obj).parent().parent().find(
										".name_fild").text();
								var description = $(obj).parent().parent()
										.find(".description_fild").text();
								var price = $(obj).parent().parent().find(
										".price_fild").text();

								$("#id").prop('value', id);
								$("#nameService").prop('value', name);
								$("#description").prop('value', description);

								if (price.valueOf().trim() === '---') {
									$("#price").prop('disabled', true);
									$("#price").prop('value', '');
								} else {
									$("#price").prop('disabled', false);
									$("#price").prop('value',
											price.split(" ")[0]);

								}

							}
							function trim(str) {
								return str.replace(/^\s+|\s+$/g, "");
							}
							$("select")
									.change(
											function() {

												var type = this.options[this.selectedIndex].value;

												if (type == '3') {
													$("#service_price").prop(
															'disabled', true);
												} else {
													$("#service_price").prop(
															'disabled', false);
												}

											}).change();
						</script>
						<br /> <input type="text" class="form-control"
							value="<c:if test="${not empty nameService}">${nameService}</c:if>"
							name="nameService" placeholder='name' /> <br /> <input
							type="text" class="form-control"
							value="<c:if test="${not empty description}">${description}</c:if>"
							name="description" placeholder='description' /> <br /> <input
							id="service_price" type="text" class="form-control"
							value="<c:if test="${not empty price}">${price}
			</c:if>"
							name="price" placeholder='price' />
					</div>
					<div class="modal-footer">
						<input type="submit" class="btn btn-primary" value="Create" />
						<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					</div>
				</div>
			</form>

		</div>
		<!-- /.modal-content -->
	</div>

	<div class="modal fade" id="editModal">
		<div class="modal-dialog" style="width: 350px;">

			<form method="post" action="services/edit">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">Edit Service</h4>
					</div>
					<div class="modal-body">
						<br /> <input type="hidden" value="" name="idService" id="id" />
						<input id="nameService" type="text" class="form-control" value=""
							name="nameService" placeholder='nameService' /> <br /> <input
							id="description" type="text" class="form-control" value=""
							name="description" placeholder='description' /> <br /> <input
							id="price" type="text" class="form-control" value="" name="price"
							placeholder='price' /> <br />
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
						<input type="submit" class="btn btn-primary" value="Save" />
					</div>
				</div>
			</form>
		</div>
		<!-- /.modal-content -->
	</div>

	<h1></h1>
	<form method="get" action="services">
		<table class="table table-hover">
			<tr>
				<th>Name</th>
				<th>Description</th>
				<th>Service Type</th>
				<th>Price</th>
				<th>Action</th>

			</tr>
			<c:forEach items="${infoServices}" var="infoService">
				<tr>
					<td class="name_fild">${infoService.service.nameService}</td>
					<td class="description_fild">${infoService.service.description}</td>
					<td>${infoService.typeService}</td>
					<td class="price_fild">${infoService.price}</td>
					<td><input type="hidden" class="id_fild"
						value=${infoService.service.id } />
						<button onclick="myFunction(this)"
							class="btn update btn-success edit" data-toggle="modal"
							data-target="#editModal">Edit</button> <a class="btn btn-danger"
						href='<c:url value="/services/delete/${infoService.service.id}"></c:url>'>
							Delete</a></td>
				</tr>
			</c:forEach>
		</table>
	</form>
</c:if>
